<template>
	<view>
		<view class="zjy-filters">
			<!-- 遮罩层 -->
			<up-dropdown
				height="88rpx"
				ref="dropdownRef"
				active-color="#BC8400"
				inactive-color="#1D2129"
				@close="onClose"
				@open="onOpen"
			>
				<block v-for="(filterItem, index) in filterItems" :key="index">
					<filter-date
						ref="filterDateRef"
						v-if="filterItem.type == 'date'"
						v-model="filterItem.value"
						:title="filterItem.title"
						@updateValue="updateValue($event, filterItem.key)"
						@close="closeDropdown"
						@selectDate="selectDate"
					/>
					<filter-scenic
						v-if="filterItem.type == 'scenic'"
						v-model="filterItem.value"
						:data="filterItem.data"
						:title="filterItem.title"
						@updateValue="updateValue($event, filterItem.key)"
						@close="closeDropdown"
					/>
					<filter-single
						v-if="filterItem.type == 'single'"
						v-model="filterItem.value"
						:data="filterItem.data"
						:title="filterItem.title"
						@updateValue="updateValue($event, filterItem.key)"
						@close="closeDropdown"
					/>
					<filter-multiple
						v-if="filterItem.type == 'multiple'"
						v-model="filterItem.value"
						:data="filterItem.data"
						:title="filterItem.title"
						@updateValue="updateValue($event, filterItem.key)"
						@close="closeDropdown"
					/>
					<filter-group
						v-if="filterItem.type == 'group'"
						v-model="filterItem.value"
						:data="filterItem.data"
						:title="filterItem.title"
						:keyName="filterItem.key"
						@updateValue="updateValue($event, filterItem.key)"
						@updateGroupValue="updateGroupValue($event, filterItem.key)"
						@close="closeDropdown"
					/>
				</block>
			</up-dropdown>
		</view>
		<up-datetime-picker
			:show="showDatePicker"
			:closeOnClickOverlay="true"
			v-model="pickerDate"
			:minDate="dayjs().subtract(2, 'year').valueOf()"
			:maxDate="dayjs().valueOf()"
			mode="date"
			@close="datePickerClose"
			@cancel="datePickerClose"
			@confirm="datePickerConfirm"
		></up-datetime-picker>
	</view>
</template>

<script setup>
import filterScenic from "./components/filter-scenic.vue"
import filterSingle from "./components/filter-single.vue"
import filterMultiple from "./components/filter-multiple.vue"
import filterGroup from "./components/filter-group.vue"
import filterDate from "./components/filter-date.vue"
import dayjs from "dayjs"
const props = defineProps({
	data: {
		type: Array,
		default: () => [],
	},
})
const emit = defineEmits(["close"])
const dropdownRef = ref()
const filterItems = ref([])
watch(
	() => props.data,
	(data) => {
		filterItems.value = []
		data.map((item) => {
			filterItems.value.push({
				value: "",
				...item,
			})
		})
	},
	{
		immediate: true,
		deep: true,
	}
)

const closeDropdown = () => {
	dropdownRef.value.close()
}
const updateValue = (values, filterKey) => {
	filterItems.value.find((filterItem) => filterItem.key == filterKey).selectValues = values
}
// 更新分组多选选项
const updateGroupValue = (values, filterKey) => {
	const targetItem = filterItems.value.find((filterItem) => filterItem.key == filterKey)
	if (targetItem) {
		if (values.length > 0) {
			targetItem.groupValues = values
		} else {
			// 如果values为空数组，删除group_value属性
			delete targetItem.groupValues
		}
	}
}
//#region 选择日期
const pickerDate = ref(Date.now())
const showDatePicker = ref(false)
const filterDateRef = ref()
const selectDate = (date) => {
	pickerDate.value = dayjs(date || dayjs()).valueOf()
	showDatePicker.value = true
}
const datePickerClose = () => {
	showDatePicker.value = false
}
const datePickerConfirm = () => {
	datePickerClose()
	uni.$emit("setFilterDate", dayjs(pickerDate.value).format("YYYY-MM-DD"))
}
//#endregion

//打开时缓存当前选项和关闭时做对比是否抛出结果
let cacheFilterItems = ""
const onOpen = () => {
	cacheFilterItems = JSON.stringify(filterItems.value)
}
const onClose = () => {
	if (cacheFilterItems != JSON.stringify(filterItems.value)) {
		let emitData = {}
		filterItems.value
			.filter((item) => item.type !== "group")
			.map((filterItem) => {
				emitData[filterItem.key] = (filterItem?.selectValues || []).join(",")
			})

		filterItems.value
			.filter((item) => item.type === "group")
			.map((filterItem) => {
				;(filterItem.groupValues || []).map((item) => {
					emitData[item.key] = (item.value || []).join(",")
				})
			})
		emit("close", emitData)
	}
}
</script>
<style lang="scss" scoped>
.zjy-filters {
	height: 88rpx;
	background: $c-white;
}
</style>
